layui.config({
    base: CXL.ctxPath + '/externaljs/'
}).extend({ //设定组件别名
    echarts: 'echarts/echarts',
    axios: 'axios/axios'
});
layui.use(['table', 'laydate', 'form', 'layer', 'element', 'echarts', 'axios'], function () {


    let form = layui.form;

    let craneType = "2#横移";

    const xOffset = 0;
    const yOffset = 0;
    let app = new PIXI.Application({width: 1020, height: 610});

    let plcConnectSnList = ["cdsccscdsd", "dsccsvvdvds"];

    //设置Pixi View背景颜色
    app.renderer.background.color = 0x264f7b;
    document.getElementById('craneAnimate').appendChild(app.view);

    //设置桥架container
    const bridgeContainer = new PIXI.Container();

    // 整体天车container
    const craneContainer = new PIXI.Container();
    const blockContainer = new PIXI.Container();
    const trolleyContainer = new PIXI.Container();
//加载大车小车图片
    const BlockCrane1 = PIXI.Sprite.from(CXL.ctxPath + '/baotou-steel/craneWork/images/BlockCrane.png');
    const BlockCrane2 = PIXI.Sprite.from(CXL.ctxPath + '/baotou-steel/craneWork/images/BlockCrane.png');
    const BlockTrolley = PIXI.Sprite.from(CXL.ctxPath + '/baotou-steel/craneWork/images/BlockTrolley.png');


    //定义辊道Container
    //定义库位Container
    const rollerContainer = new PIXI.Container();
    const stockContainer = new PIXI.Container();

    //加载辊道和垛位素材
    const rollerSprite = PIXI.Sprite.from(CXL.ctxPath + '/baotou-steel/craneWork/images/Roller.png');
    const stockSprite = PIXI.Sprite.from(CXL.ctxPath + '/baotou-steel/craneWork/images/Stock.png');

    //渲染基准数据
    let normalRenderData = {
        BlockCrane1X: 100,
        BlockCrane1Y: 50,
        BlockCrane2X: 150,
        BlockCrane2Y: 50,

        BlockTrolleyX: 100,
        BlockTrolleyY: 220,

        upBridgeX: 25,
        upBridgeY: 50,
        downBridgeX: 25,
        downBridgeY: 550,
    }
    //设置天车位置全局变量
    let craneLocation = {
        x: 100,
        y: 50,
        z: 0,
    };

    //缓存上一次天车位置
    let cacheCraneLocation = {
        x: 0,
        y: 0,
        z: 0
    }

    initPage();

    //初始化页面方法
    function initPage() {

        //绘制辊道
        drawRollers();
        //绘制垛位
        drawStocks();
        //绘制桥架
        drawBridges();
        //绘制天车
        drawCrane();

        //监听数据变化实现动画
        // new WatchValueChange(craneLocation, 'x', () => {
        //     console.log('我是监听函数')
        // })

        //订阅任务信息
        setTimeout(function () {
            subscribeTaskStatus(craneType);

            //plc待对接后开发
            // subscribePlcData(plcConnectSnList);
        }, 1000);


        connect();
        setInterval(function () {
            // //1秒后执行刷新
            // subscribeSocket();
            if (craneLocation.x + 40 < 1000 && craneLocation.y + 20 < 400) {
                updateCraneLocation(craneLocation.x + 40, 220, craneLocation.z + 10);
            } else {
                updateCraneLocation(100, 100, craneLocation.z + 10);
            }
            // animateCrane(craneX, craneY);
        }, 1000);


        setInterval(function () {
            animateCrane()


        }, 1000)
    }


    function drawBridges() {
        //加载上下桥架图片
        let upBridge = PIXI.Sprite.from(CXL.ctxPath + '/baotou-steel/craneWork/images/Bridge.png');
        let downBridge = PIXI.Sprite.from(CXL.ctxPath + '/baotou-steel/craneWork/images/Bridge.png');

        upBridge.position.set(normalRenderData.upBridgeX, normalRenderData.upBridgeY);
        downBridge.position.set(normalRenderData.downBridgeX, normalRenderData.downBridgeY);

        //Container中加入桥架精灵
        bridgeContainer.addChild(upBridge);
        bridgeContainer.addChild(downBridge);

        //container加入app
        app.stage.addChild(bridgeContainer);

    }

    //绘制天车
    function drawCrane() {

        // app.stage.addChild(craneContainer);
        app.stage.addChild(blockContainer);
        app.stage.addChild(trolleyContainer);

        //设置容器相对于Pixi画布坐标
        blockContainer.position.set(100, 50);
        trolleyContainer.position.set(100, 50);

        // BlockCrane.scale.set(0.35);
        BlockCrane1.position.set(0, 0);
        // BlockCrane1.position.set(normalRenderData.BlockCrane1X, normalRenderData.BlockCrane1Y);
        BlockCrane2.position.set(50, 0);
        //缩放0.5倍
        BlockTrolley.scale.set(0.5);
        BlockTrolley.position.set(0, 0);

        blockContainer.addChild(BlockCrane1);
        blockContainer.addChild(BlockCrane2);
        trolleyContainer.addChild(BlockTrolley);

        console.log(blockContainer.x);
        console.log(blockContainer.y);
    }

    //更新天车位置
    function updateCraneLocation(x, y, z) {
        cacheCraneLocation.x = craneLocation.x;
        cacheCraneLocation.y = craneLocation.y;
        cacheCraneLocation.z = craneLocation.z;

        craneLocation.x = x;
        craneLocation.y = y;
        craneLocation.z = z;
    }


    function animateCrane() {
        //新建天车各部分的动画对象
        let blockCraneTween = null;
        // let blockCrane2Tween = null;
        let blockTrolleyTween = null;

        if (cacheCraneLocation.x !== craneLocation.x) {
            blockCraneTween = new TweenMax(blockContainer, 1, {
                x: transformX(craneLocation.x),
                y: normalRenderData.BlockCrane1Y,
                paused: true
            });

            blockTrolleyTween = new TweenMax(trolleyContainer, 1, {
                x: transformX(craneLocation.x),
                y: transformY(craneLocation.y),
                paused: true
            });
        }

        if (blockCraneTween !== null) {
            blockCraneTween.play();
        }

        if (blockTrolleyTween !== null) {
            blockTrolleyTween.play();
        }


    }


    //实际坐标转换为渲染坐标
    function transformX(x) {
        return x;
    }

    function transformY(y) {
        return y;
    }

    function transformZ(z) {
        return z;
    }

    //绘制辊道
    function drawRollers() {
        app.stage.addChild(rollerContainer);
        rollerContainer.position.set(100, 20);

// 设置虚线样式
        rollerSprite.position.set(0, 0);
        rollerContainer.addChild(rollerSprite);
    }

    //绘制垛位
    function drawStocks() {
        app.stage.addChild(stockContainer);
        stockContainer.position.set(500, 80);

// 设置虚线样式
        stockSprite.position.set(0, 0);
        stockContainer.addChild(stockSprite);
    }

//保存动作
    form.on('submit(startTask)', function (data) {
        //封装启动参数
        let inputDataJson = JSON.stringify(data.field);
        let craneTypeJson = JSON.stringify(craneType);

        let submitData = {
            craneType: craneTypeJson,
            inputData: inputDataJson,
        };


        //发送开始命令
        startWork(submitData);


    });


    //停止任务
    form.on('submit(stopTask)', function (data) {
        //封装启动参数
        let inputDataJson = JSON.stringify(data.field);
        let craneTypeJson = JSON.stringify(craneType);

        let submitData = {
            craneType: craneTypeJson,
            inputData: inputDataJson,
        };


        //发送停止命令
        stopWork(submitData);


    });

    //全局方法块
    /**
     * 监听数据的改变全局方法
     * @param vm
     * @param key
     * @param action
     * @returns {*}
     * @constructor
     */
    function WatchValueChange(vm, key, action) {
        var val = vm[key]
        Object.defineProperty(vm, key, {
            enumerable: true,
            configurable: true,
            get() {
                return val
            },
            set(newVal) {
                action()
                if (val !== newVal) {
                    val = newVal
                }
            }
        })
    }


});

